<template>
  <div>
    <a-drawer
      width="900"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>任务详情</span>
        </div>
      <el-row v-loading="loading">
        <el-col :span="24">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 30px 40px">
                  <el-col :span="24" style="background: #fafafa;padding:25px;">
                    <el-row>
                      <!-- 标准 -->
                      <el-col :span="24" style="text-align: center">
                        <p style="color:#645454;font-size:14px;margin-top:15px;">{{parames.startMonth}}</p>
                        <p style="color:#409eff;font-size:14px;margin-top:15px;">{{parames.taskStatus}}</p>
                        <p style="color:#645454;font-size:14px;margin-top:15px;">{{parames.endMonth}}</p>
                        <!-- <el-button v-if="parames.processEnum.name !== 'NEW'" @click="handleTask" style="margin-top:20px" size="small">执行任务</el-button> -->
                        <el-button :loading="loadingBtn" @click="handleAdd" style="margin-top:20px" size="small">开始记账</el-button>
                        <!-- <p style="margin-top:20px">新建-完成任务</p> -->
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="24">
                    <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                      <a-collapse-panel class="marginB10" header="基本资料" key="1">
                        <el-row :gutter="10">
                          <el-col :span="12" style="margin-top:14px">
                            <el-form-item label="客户名称:">
                              <span>{{parames.customerName}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12" style="margin-top:14px">
                            <el-form-item label="联系人:">
                              <p>{{parames.contacts}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="联系方式:">
                              <span>{{parames.contactDetails}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="当前报税期:">
                              <p>{{parames.currentBookKeepingMonth}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="开始月份:">
                              <p>{{parames.startMonth}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="截止月:">
                              <p>{{parames.endMonth}}</p>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="服务进展:">
                              <span>{{parames.serviceProgress}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="服务单价:">
                              <span>{{parames.unitPrice}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="服务金额:">
                              <span>{{parames.serviceAmount}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="实收:">
                              <span>{{parames.receiptedAmount}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="支出:">
                              <span>{{parames.expenditureAmount}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="状态:">
                              <span>{{parames.taskStatus}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </a-collapse-panel>
                    </a-collapse>
                  </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    <createdDialog :dialogData="dialogData" @checkRender="checkRender"></createdDialog>

    </a-drawer>
  </div>
</template>

<script>
import createdDialog from "./addAllDialog.vue"; //新建收款记录

export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      loadingBtn:false,
      activeNames: ['1'],
      parames: {},
      dialogData: {
        //新建弹窗
        time: '',
        ie: '',
        show: false
      },
    }
  },
  methods: {
    handleClose() { //关闭弹窗
      this.detailData.show = false;
    },
    handleTask () { //执行任务
      this.loadingBtn = true
      this.$post(this.$api.postTaskDisposableProcess,{
        contractProductId: this.parames.contractProductId
      }).then(response => {
        if (response.data.succeed) {
          this.$message({message: '执行成功',type: 'success'})
          this.$emit('checkRender')
          this.handleClose()
          setTimeout(() => {
            this.loadingBtn = false
          }, 200)
        }
      })
    },
    handleAdd() { //新建
      this.dialogData.id = this.detailData.id
      this.dialogData.time = this.parames.currentBookKeepingMonth
      this.dialogData.type = 'new'
      this.dialogData.show = true;
    },
    checkRender () {
      this.render()
    },
    handleTask2 () { //完成任务
      this.$post(this.$api.postTaskDisposableComplete,{
        contractProductId: this.parames.contractProductId,
      }).then(response => {
        if (response.data.succeed) {
          this.$message({message: '执行成功',type: 'success'})
          this.$emit('checkRender')
          this.handleClose()
        }
      })
    },
    render () {
      // this.parames = this.detailData.data 
      this.$post(this.$api.posTaskBookkeepingFind,{
        contractProductId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
        }
      })     
    }
  },
  components: {
    createdDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
          this.activeNames = ['1']
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.kaipiao-box{
  width: 100%;
  height: 80px;
  padding: 20px 0 20px 60px;
  position: relative;
  background: #d8bf99;
  color: #fff;
  font-size: 14px
}
.kaipiao-box-left{
  display: block;
  position: absolute;
  top: 30px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-right{
  display: block;
  position: absolute;
  top: 30px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-bottom{
  border-bottom: rgba(216, 191, 153, 1) solid 2px;
  margin-top: 2px;
}
.kaipiao-xu:last-child{
  border-right: none;
}
.kaipiao-xu{
  border-right: #fff dashed 1px;
}
.kaipiao-xu .jine-top{
  margin-top: 5px;
  font-size: 16px;
}
</style>
